<template>
    <view>
        <view class="top_suspension"  v-if="scroll_top > user_info_top">
            <u-navbar :is-back="false" :border-bottom="false" title-color="#fff" title="我的" :background="{background: 'url(/static/center/center_bg.png) no-repeat center/cover'}">
                <view class="slot-wrap u-m-l-30">
                    <u-image width="50" shape="circle" :src="user_info.head_img" mode="widthFix" :fade="true" duration="450"></u-image>
                </view>
                <!-- #ifdef APP-PLUS -->
                <template v-slot:right="">
                    <view class="u-m-r-30">
                         <u-icon name="setting" color="#fff" size="44"></u-icon>
                    </view>
                </template>
                <!-- #endif -->
            </u-navbar>
        </view>

        <view class="header p_b_60">
            <u-navbar :is-back="false" :is-fixed="false" :background="{backgroundColor:'transparent'}" :border-bottom="false"></u-navbar>
            <view class="user_info u-flex p_row_35 u-rela">
                <view class="">
                    <u-image width="100" shape="circle" :src="user_info.head_img" mode="widthFix" :fade="true"
                        duration="450"></u-image>
                </view>
                <view class="info u-m-l-20">
                    <view class="u-flex color_w u-font-36 f_w_600">
                        <text selectable>{{user_info.nickname}}</text>
                        <view class="role_tag u-m-l-10" :style="{backgroundPosition:iconPosition[user_info.role_id]}">

                        </view>
                    </view>
                    <view class="u-m-t-20">
                        <u-tag text="京享值" shape="circle" size="mini" color="#fff" bg-color="rgba(0,0,0,.3)"
                            border-color="transparent" />
                        <u-tag class="u-m-l-10" text="信用分" shape="circle" size="mini" color="#fff"
                            bg-color="rgba(0,0,0,.3)" border-color="transparent" />
                    </view>
                </view>

                <view class="setting u-abso">
                    <u-icon name="setting" color="#fff" size="44"></u-icon>
                </view>
            </view>

            <view class="my_collection u-m-t-20 u-flex u-row-around u-font-26 u-text-center color_w">
                <view class="" v-for="(item,index) in collection" :key="index">
                    <view class="f_w_600">
                        {{item.number}}
                    </view>
                    <view class="u-font-24 u-m-t-10">
                        {{item.lable}}
                    </view>
                </view>
            </view>

            <view class="vip_welfare u-flex o_hidden  p_row_20 u-font-24">
                <u-image width="110" src="/static/center/plus.png" mode="widthFix"></u-image>
                <view class="u-rela welfare u-p-l-40 u-flex-1">
                    每月5张运费券
                </view>
                <view class="see_btn u-flex u-row-center zhu_color p_row_20 br_20">
                    立即查看
                </view>
            </view>
        </view>
        <view class="order  bg_w  br_30 p_row_30">
            <view class="order_info p_col_30">
                <view class="head p_b_30 ">
                    <u-section title="订单" sub-title="查看全部订单"></u-section>
                </view>
                <view class="list u-flex u-row-around ">
                    <view class="u-flex u-flex-col u-col-center u-rela" v-for="(item,index) in order_list" :key="index">
                        <u-badge size="mini" :count="item.number" :is-center="true"></u-badge>
                        <view class="u-rela">
                            <u-image width="52" :src="item.icon" mode="widthFix"></u-image>
                        </view>
                        <view class="color_6 u-font-26">
                            {{item.text}}
                        </view>
                    </view>
                </view>
            </view>

            <view class="logistics b_t_s_1 p_col_20">
                <swiper class="swiper_box u-rela" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
                    :vertical="true">
                    <swiper-item v-for="(item,index) in logistics" :key="index">
                        <view class="swiper-item u-flex">
                            <view class="br_10 o_hidden">
                                <u-image width="80" height="80" :src="item.order_info.goods.goods_img"
                                    mode="aspectFill"></u-image>
                            </view>
                            <view class="u-m-l-20 u-font-24 color_9 w_80">
                                <view class=" ">
                                    <text class="err_color u-m-r-20">{{item.status_text}}</text>
                                    <text>{{item.update_time}}</text>
                                </view>
                                <view class="u-m-t-20 u-line-1 w_100">
                                    <text>{{item.logistics_msg}}</text>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>

        <view class="assets u-flex bg_w br_30 u-m-t-30 p_col_30 zhu_color">
            <view class="w_20 u-flex u-flex-col " v-for="(item,index) in assets" :key="index">
                <view class="u-font-32 f_w_600">
                    {{parseFloat(item.number) > 10000 ? item.number/1000 +'k' : item.number}}
                </view>
                <view class="u-m-t-10">
                    {{item.lable}}
                </view>
            </view>
            <view class="u-flex-1 u-flex u-flex-col assets_item u-rela">
                <view class="">
                    <u-image width="32" src="/static/center/assets.png" mode="widthFix"></u-image>
                </view>
                <view class="u-m-t-10">
                    我的资产
                </view>
            </view>
        </view>

        <view class="utils br_30 bg_w u-m-t-30 m_b_30">
            <view class="head u-font-32 f_w_600 p_col_30 p_row_30 b_b_s_1">
                <u-section title="工具与服务" :right="false"></u-section>
            </view>
            <view class="list u-m-t-30 p_b_30 u-flex u-flex-wrap">
                <view class="w_25 u-flex u-flex-col p_b_30 util_item" v-for="(el,idx) in utils" :key="idx" >
                    <view class="">
                        <u-image width="70" :src="el.icon" mode="widthFix"></u-image>
                    </view>
                    <view class="">
                        {{el.text}}
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import enumJson from '@/common/enum/index.json'
    export default {
        data() {
            return {
                user_info_top: 0,
                scroll_top:0,
                iconPosition: enumJson.roleIconPosition,
                user_info: {
                    head_img: "/static/icon/touxiang.png",
                    nickname: "可达鸭",
                    role_id: 0,
                },
                assets: [{
                        number: "4",
                        lable: "优惠券"
                    },
                    {
                        number: "40000.00",
                        lable: "余额"
                    },
                    {
                        number: "400.00",
                        lable: "豆子"
                    },
                    {
                        number: "0",
                        lable: "红包"
                    },
                ],
                logistics: [{
                        status_text: "配送中",
                        update_time: "2022-10-04 12:00:13",
                        logistics_msg: "正在等待快递公司上门收货",
                        order_info: {
                            goods_number: 1,
                            goods: {
                                goods_img: "https://img10.360buyimg.com/mobilecms/s150x150_jfs/t1/214368/26/2590/297546/617eafb4Eac0b7fd7/742b6667be5c94bf.jpg!q70.dpg.webp"
                            },
                        }
                    },
                    {
                        status_text: "发货中",
                        update_time: "2022-10-04 12:00:13",
                        logistics_msg: "正在等待快递公司上门收货",
                        order_info: {
                            goods_number: 3,
                            goods: {
                                goods_img: "https://img10.360buyimg.com/mobilecms/s150x150_jfs/t1/214368/26/2590/297546/617eafb4Eac0b7fd7/742b6667be5c94bf.jpg!q70.dpg.webp"
                            },
                        }
                    },
                    {
                        status_text: "配送中",
                        update_time: "2022-10-04 12:00:13",
                        logistics_msg: "正在等待快递公司上门收货",
                        order_info: {
                            goods_number: 2,
                            goods: {
                                goods_img: "https://img10.360buyimg.com/mobilecms/s150x150_jfs/t1/214368/26/2590/297546/617eafb4Eac0b7fd7/742b6667be5c94bf.jpg!q70.dpg.webp"
                            },
                        }
                    },
                ],
                order_list: [{
                        icon: '/static/center/daifukuan.png',
                        text: "待付款",
                        number: 2,
                    },
                    {
                        icon: '/static/center/daifahuo.png',
                        text: "待发货",
                        number: 2,
                    },
                    {
                        icon: '/static/center/daishouhuo.png',
                        text: "待收货",
                        number: 2,
                    },
                    {
                        icon: '/static/center/tuihuanhuo.png',
                        text: "退换货",
                        number: 2,
                    },
                ],
                collection: [{
                        number: "50",
                        lable: "商品收藏"
                    },
                    {
                        number: "50",
                        lable: "店铺收藏"
                    },
                    {
                        number: "50",
                        lable: "我的足迹"
                    },
                ],
                utils: [{
                        icon: '/static/center/daifukuan.png',
                        text: "待付款",
                    },
                    {
                        icon: '/static/center/daifukuan.png',
                        text: "待付款",
                    },
                    {
                        icon: '/static/center/daifukuan.png',
                        text: "待付款",
                    },
                    {
                        icon: '/static/center/daifukuan.png',
                        text: "待付款",
                    }
                ],
            };
        },
        onLoad() {
            this.getHeaderHeight()
        },
        onPageScroll(e) {
            this.scroll_top = e.scrollTop
        },
        methods: {
            getHeaderHeight() {
                this.$u.getRect('.user_info').then(res => {
                    this.user_info_top = res.bottom
                })
            },
            swiperChange(e) {
                this.current = e.detail.current
            }
        }
    }
</script>

<style lang="scss" scoped>
    .top_suspension{
    }
    .header {
        background: url('https://img12.360buyimg.com/img/s1500x886_jfs/t1/115726/22/13102/240974/5f18fb83Ee40e230b/d4f2a67087fd443a.png') no-repeat center/cover;

        .vip_welfare {
            height: 84rpx;
            background: url('https://img12.360buyimg.com/img/s678x99_jfs/t1/112839/2/12981/33105/5f17e12aE602bb83e/8a736742745d79cf.png') no-repeat center/cover;
            margin: 30rpx 35rpx 0;
            border-top-right-radius: 20rpx;
            border-top-left-radius: 20rpx;
            color: #ffe678;

            .see_btn {
                background-color: #ffe678;
                padding-top: 5rpx;
                padding-bottom: 5rpx;
            }

            .see_btn::after {
                content: "";
                display: inline-block;
                width: 0px;
                border-left: 5px solid #262626;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                margin-left: 10rpx;
            }

            .welfare::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 10rpx;
                transform: translateY(-50%);
                width: 1px;
                height: 20rpx;
                background-color: #ffe678;
                margin: 0 10rpx;
            }
        }

        .user_info {
            .setting {
                right: 36rpx;
                top: 10rpx;
            }

            .role_tag {
                width: 30rpx;
                height: 30rpx;
                background-repeat: no-repeat;
                background-size: cover;
                background-image: url('https://img12.360buyimg.com/img/s300x60_jfs/t1/113596/13/13099/22116/5f1a4bddEb7f1a190/8581e1b9765e15ff.png');
            }
        }
    }

    .order {
        margin-top: -60rpx;

        .swiper_box {
            height: 100rpx;
        }
    }

    .assets {
        &_item::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 80%;
            background-color: #f2f2f2;
        }

        &_item::after {
            content: "";
            position: absolute;
            left: 1px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            border-left: 5px solid #f2f2f2;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }
    }

    .utils {
        .utils_swiper {
            height: 470rpx;
        }
    }

</style>
